<template>
	<view class="page">
		<navbar title="个人中心" bgColor="transparent" :titleStyle="titleStyle"></navbar>
		<scroll-view class="scroll-view_H" :style="{height: 'calc(100vh - 44px)'}" scroll-y="true">
			<view class="home-bg">
				<image mode="widthFix" style="width: 100%;display: block;" src="@/static/home/top-bg.jpg"></image>
				<view class="current-visit-card">
					<view class="content flex align-center">
						<view style="flex: 1;height: 100%;display: flex;flex-direction: column;">
							<view class="avator">
								<button class="cell-wrapper" open-type="chooseAvatar" @chooseavatar="getUserProfile">
									<image mode="widthFix" style="width: 110rpx;height: 110rpx; display: block;"
										:src="avatorUrl"></image>
								</button>

								<text style="font-size: 32rpx;color: #4F79DC;font-weight: bold;">个人信息</text>
								<image mode="widthFix" style="width: 110rpx;height: 110rpx; display: block;opacity: 0;"
									src="@/static/home/avator.png"></image>

							</view>
							<view class="inCompany-task">
								<view class="task-item">
									<view class="left">
										<view class="top" style="padding-top: 20rpx;">
											<text class="label-content">姓名</text>
											<text
												style="font-size: 28rpx;color: #666666;">{{infos.userName || '-' }}</text>
										</view>
										<u-line></u-line>
										<view class="top" style="padding-top: 20rpx;">
											<text class="label-content">手机</text>
											<text
												style="flex: 1; font-size: 28rpx;color: #666666;">{{infos.mobile || '-'}}</text>
											<!-- <view style="flex: 1;">
												<text v-if="isShowEdit"
													style="flex: 1; font-size: 15px;color: #666666;">{{infos.mobile || '-'}}</text>
												<u--input v-model="currentMobile" :focus="!isShowEdit" v-else
													border="none" placeholder="请输入手机号" type="number" maxlength="11"
													fontSize="15px" clearable></u--input>
											</view> -->

											<!-- <text style="font-size: 26rpx;color: #4F79DC;margin-left: 20rpx;"
												@click="editMobile">{{isShowEdit?'修改':'确认'}}</text> -->
										</view>
										<u-line></u-line>
										<view class="top" style="padding-top: 20rpx;">
											<text class="label-content">身份证号</text>
											<text
												style="flex: 1; font-size: 28rpx;color: #666666;">{{infos.idNumber || '-'}}</text>
										</view>
										<u-line></u-line>
										<view class="top" style="padding-top: 20rpx;">
											<text class="label-content">人员类型</text>
											<text
												style="flex: 1; font-size: 28rpx;color: #666666;">{{(!userInfo.isEnterprise && userInfo.isAuthentication)?'企业用户':(!userInfo.isEnterprise && !userInfo.isAuthentication)?'普通用户':(userInfo.isEnterprise && userInfo.lawEnforcementOfficials)?'执法人员':(userInfo.isEnterprise && !userInfo.lawEnforcementOfficials)?'普通入企人员':''}}</text>

											<!-- <text v-if="!userInfo.isEnterprise && !userInfo.isAuthentication"
												style="font-size: 28rpx;color: #4F79DC;text-align: right;"
												@click="toAuthenticationLaw">认证入企人员</text> -->
										</view>
										<template v-if="userInfo.isEnterprise && userInfo.lawEnforcementOfficials">
											<u-line></u-line>
											<view class="top" style="padding-top: 20rpx;">
												<text class="label-content">执法单位</text>
												<text
													style="flex: 1; font-size: 28rpx;color: #666666;">{{userInfo.lawEnforcementOfficials.unit || ''}}</text>
											</view>
											<u-line></u-line>
											<view class="top" style="padding-top: 20rpx;">
												<text class="label-content">执法证</text>
												<text
													style="flex: 1; font-size: 28rpx;color: #666666;">{{userInfo.lawEnforcementOfficials.lawEnforcementCertificateNumber || ''}}</text>
											</view>
										</template>
										<u-line v-if="!userInfo.isEnterprise"></u-line>
										<view v-if="!userInfo.isEnterprise" class="top"
											style="padding-top: 20rpx;border: none;">
											<text class="label-content">认证企业</text>
											<text
												style="flex: 1; font-size: 28rpx;color: #666666;">{{infos.companyCounts || '0'}}</text>
											<text style="font-size: 28rpx;color: #4F79DC;text-align: right;"
												@click="toAuthentication">去认证企业</text>

										</view>
										<u-line v-if="!userInfo.isEnterprise"></u-line>
										<view v-if="!userInfo.isEnterprise" class="top"
											style="padding-top: 20rpx;border: none;">
											<text class="label-content">账号注销</text>
											<text style="flex: 1;font-size: 28rpx;color: #4F79DC;text-align: right;"
												@click="logOff">点击注销当前账号</text>

										</view>

									</view>

								</view>

							</view>

						</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 消息提示-->
		<u-toast ref="uToast"></u-toast>

		<tab-bar :selected="selected"></tab-bar>
	</view>
</template>

<script>
	import {
		checkDate,
		checkProv,
		checkParity,
		checkPhone,
		toast,
		showConfirm,
	} from "@/utils/common.js"
	import {
		getPersonalCenter,
		addHeadSculpture,
		getHeadSculpture,
		authentication,
		logOffUser,
	} from '@/api/pagesMine'
	import store from '@/store'
	import TabBar from "@/components/tabBar.vue"
	let App = getApp();
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				selected: 2,
				isShowEdit: true,
				showLogin: false,
				statusHeight: 44 + App.globalData.statusBarHeight,
				avatorUrl: require('@/static/home/avator.png'),
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				labelStyle: {
					color: "#323232",
					fontWeight: "bold",
					fontSize: "28rpx"
				},
				userInfo: store.state.user.USER_INFO,
				infos: null,
				currentMobile: "",

			};
		},
		onLoad() {
			this.init()
			this.$eventBus.$off('Mine')
			this.$eventBus.$on('Mine', (param) => {
				this.init()
			})
		},
		onPullDownRefresh() {
			this.init()
		},
		onShow() {
			this.getDataInfo()
		},
		methods: {
			checkPhone,
			init() {
				this.userInfo = store.state.user.USER_INFO
				this.getDataInfo()
			},
			/* 修改手机号 */
			editMobile() {
				if (!this.isShowEdit) { //确认修改手机号
					if (this.checkPhone(this.currentMobile)) {
						showConfirm('确认要修改手机号?').then(res => {
							console.log(res)
							if (res.confirm) {
								/* 修改手机号 */
								this.isShowEdit = true
							}
							if (res.cancel) {
								this.isShowEdit = true
							}
						})
					} else {
						uni.$u.toast('手机号不正确')
					}

				}
				if (this.isShowEdit) {
					this.isShowEdit = false
				}
			},
			/* 获取基本信息 */
			getDataInfo() {
				let userId = store.state.user.USER_OPENID
				getPersonalCenter(userId).then(res => {
					this.infos = res.data
					this.currentMobile = res.data.mobile || ''
					//网络请求获取后关闭下拉框
					uni.stopPullDownRefresh()
				});
				getHeadSculpture(userId).then(res => {
					if (res.data && res.data.headSculpturePath != '') {
						this.avatorUrl = res.data.headSculpturePath
					} else {
						this.avatorUrl = require('@/static/home/avator.png')
					}
				});

			},
			/* 获取头像 */
			getUserProfile(res) {
				console.log(res, "****************头像****************")
				const {
					avatarUrl
				} = res.detail
				this.avatorUrl = avatarUrl
				/* 真机调试直接保存 */
				this.saveAvator(avatarUrl)
				/* 工具调试先下载再保存 */
				// uni.downloadFile({
				// 	url: avatarUrl,
				// 	success: (downloadRes) => {
				// 		if (downloadRes.statusCode === 200) {
				// 			const filePath = downloadRes.tempFilePath;
				// 			const fileSystemManager = uni.getFileSystemManager();
				// 			fileSystemManager.readFile({
				// 				filePath: filePath,
				// 				encoding: 'base64',
				// 				success: (res) => {
				// 					console.error(res, '++++++成功+++++++')
				// 					this.saveAvator('data:image/jpeg;base64,' + res.data)
				// 				},
				// 				fail: (err) => {
				// 					console.error("读取文件失败:", err);
				// 				}
				// 			});
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		console.error("下载文件失败:", err);
				// 	}
				// });
			},
			/* 保存头像 */
			saveAvator(url) {
				let userId = store.state.user.USER_OPENID
				addHeadSculpture({
					userId: userId,
					headSculpturePath: url
				}).then(res => {
					this.$eventBus.$emit('Home', 'avstorRefresh')
					uni.$u.toast(res.data)
				});
			},
			toAuthentication() {
				uni.navigateTo({
					url: '/pages-mine/pages/myAuthentication/index?whereFrom=personal'
				});
			},
			/* 去认证入企人员 */
			toAuthenticationLaw() {
				showConfirm('确认要申请认证入企人员?').then(res => {
					if (res.confirm) {
						let userId = store.state.user.USER_OPENID
						this.$store.dispatch('user/Authentication', {
							userId: userId
						}).then((res) => {
							uni.$u.toast('认证成功！')
							this.init()
						});
					}
				})
			},
			/* 账号注销 */
			logOff() {
				showConfirm('注销当前账号之后，账号认证的企业信息将移除，请谨慎操作！').then(res => {
					if (res.confirm) {
						let userId = store.state.user.USER_OPENID
						logOffUser(userId).then(res => {
							console.log(res)
							if (res.code == 200) {
								this.$store.dispatch('user/logout').then(() => {
									uni.$u.toast('注销成功！')
									setTimeout(() => {
										this.$eventBus.$emit('Home', 'logOff')
										uni.switchTab({
											url: '/pages/home/index'
										});
									}, 600)

								});
							} else {
								uni.$u.toast('注销失败，请重试')
							}

						});
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.cell-wrapper {
		width: 110rpx;
		height: 110rpx;
		padding: 0px;
		margin: 0px;
		background: none;
		border-radius: 50%;
	}

	.cell-wrapper:after {
		border: none;
	}

	.login-form {
		padding: 30rpx;

		.header-title {
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			color: #1169DB;
			font-weight: bold;
			padding-bottom: 30rpx;
		}

		.basic-title {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #1169DB;
			padding: 20rpx 0px;
		}

	}

	.login-bt {
		background: transparent;
		font-size: 28rpx;
		color: #1169DB;
		font-weight: bold;
	}

	.login-bt:after {
		border: none;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.dial-nav {
		padding: 24rpx 30rpx 30rpx 30rpx;
	}

	.scroll-view_H {
		width: 100%;


		.submit-content {
			padding: 30rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.menu-card {
			width: 100%;
			padding-bottom: 24rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.menu-item {
				flex: 1;
				padding: 26px 15px 15px 15px;
				background-color: #fff;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
				border-radius: 20rpx;

				.content {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 30rpx;
					color: #323232;
					font-weight: bold;

				}
			}
		}

		.title-line {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #1169DB;

			.line-dot {
				margin: 0px 10px;
				display: flex;
				align-items: center;
				flex: 1;
				height: 1px;
				background-color: #1169DB;
			}
		}

		.home-bg {
			width: 100%;
			padding-bottom: 80px;
			position: relative;


			.current-visit-card {
				width: 94%;
				margin-top: -100rpx;
				margin-left: 3%;
				background-color: #fff;
				border-radius: 18rpx;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
				display: flex;

				.content {
					flex: 1;
					height: 100%;
					padding: 30rpx;

					.avator {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.inCompany-task {
						display: flex;
						flex-direction: column;
						padding-top: 30rpx;


						.task-item {
							display: flex;
							align-items: center;

							.left {
								flex: 1;
								display: flex;
								flex-direction: column;

								.top {
									display: flex;
									padding-bottom: 20rpx;
									height: 30px;
									align-items: center;

									.label-content {
										width: 90px;
										font-size: 28rpx;
										color: #323232;
										font-weight: bold;
									}
								}
							}
						}
					}

				}
			}
		}

	}
</style>